<template>
	<view class="container-order-detail">
	  <view class="header">
	    <view class="box">
	      <view>订单号:{{orderData.order_total.order_sn}}</view>
	      <view class="info" v-if="orderData.order_total">
	        <view>{{orderData.order_total.student_name + orderData.order_total.phone}}</view>
	        <view>{{orderData.order_total.grade_name + orderData.order_total.class_name}}</view>
	        <view>{{orderData.order_total.province + orderData.order_total.city + orderData.order_total.area + orderData.order_total.detail}}</view>
	      </view>
	      <view class="info" v-else>
	        <view></view>
	        <view></view>
	        <view></view>
	      </view>
	    </view>
	    <view class="box font-size">下单时间: {{orderData.order_total.created_at}}</view>
	    <view class="box font-size">支付状态: {{orderData.order_total.pay_status}}</view>
	    <view class="box font-size">配送方式: {{orderData.order_total.send_type}}</view>
	    <view class="box-spacing">订单产品</view>
	  </view>
	  <view class="body box-spacing">
	    <scroll-view
	    scroll-y="true" 
	    :style="'height:' + scrollViewHeight + 'px'" 
	    scroll-into-view="toView" 
	    scroll-top="scrollTop" 
	    class="scroll-view">
	      <view class="scroll-view-item" v-for="(item,index) in orderData.order_fashion_info" :key="index">
	        <view class="item-status">
	          <view v-if="item.refund_status" class="item-status-refund">已退款</view>
	          <view v-else-if="item.send_status" class="item-status-send">已发货</view>
	          <view v-else class="item-status-unsend">未发货</view>
	        </view>
	        <view class="item-name">{{item.real_name +"("+ item.sex +")"}}</view>
	        <view class="item-price">¥{{item.price}}</view>  
	      </view>
	    </scroll-view>
	  </view>
	  <view class="footer box">
	    <view>总金额:</view>
	    <view>¥{{orderData.order_total.total_money}}</view>
	  </view>
	</view>

</template>

<script>	
	export default {
		data() {
			return {
				scrollViewHeight: 0,
				option: null,
				orderData: {
					order_total:{}
				}
			}
		},
		onLoad(option){
		    this.option = option
		    this.getOrderDetail()
			uni.setNavigationBarTitle({
			  title:'订单详情'
			})
		  },
		  mounted() {
		  	this.calcScrollViewHeight()
		  },
		methods: {
			getOrderDetail () {
			    let type = this.option.type == 1 ? 2 : 1
				
				this.$api.getOrderDetail({
			        order_type: type,
			        order_sn: this.option.orderSn
			      }).then(rep => {
					  let {data} = rep.data
					  this.orderData = data
				  })
			  },
			
			  calcScrollViewHeight(){
			    //设置scroll-view高度
				let query = uni.createSelectorQuery();
				query.select('.header').boundingClientRect();
				query.select('.footer').boundingClientRect();
				query.exec((rect) => {
				  console.log(rect)
				  let height = this.$store.getters.windowHeight - rect[0].height - rect[1].height - 20;
				  this.scrollViewHeight = height;
				})
			  }
		}
	}
</script>

<style lang="scss">
page{
  height: 100%;
}

.container-order-detail{
  display: flex;
  flex-direction: column;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.box{
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 8px;
}

.box:last-child, .box:nth-child(4){
  border-bottom: 1px solid #ddd;
}

.box-spacing{
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 8px;
  font-size: 17px;
  font-weight: bold;
}

.scroll-view-item{
  display: flex;
  font-size: 13px;
  font-weight: normal;
  height: 70rpx;
  align-items: center;
  justify-content: space-around;
}

.scroll-view-item > view:nth-child(1){
  color: white;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140rpx;
}

.header{
  
}

.header > .box:nth-child(1) > view:nth-child(1){
  font-size: 17px;
  font-weight: bold;
}

.info{
  background-color: #F5F5F5;
  padding: 12px;
}

.info > view{
  height: 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
}

.font-size{
  font-size: 13px;
}

.body{

}

.item-status{
  width: 15%;
  background-color: teal;
  color: gray;
  background-color: rgb(239, 239, 239);
}

.item-name{
  width: 55%;
  padding-left: 10px;
}

.item-price{
  width: 25%;
  padding-left: 6px;
}

.item-status-refund{
  background-color: rgb(239, 239, 239);
  color: gray;
  width: 100%;
  text-align: center;
}

.item-status-send{
  background-color: rgb(95, 172, 8);
  color: white;
  width: 100%;
  text-align: center;
}

.item-status-unsend{
  background-color: rgb(241, 136, 28);
  color: white;
  width: 100%;
  text-align: center;
}

.footer{
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: bold;
  height: 70rpx;
}
</style>
